<template>
	<view class="detail">
		<view class="detail-title">
			{{detail_params.title}}
		</view>
		<view class="detail-header">
			<view class="detail-header__logo">
				<image :src="detail_params.author.avatar" mode=""></image>
			</view>
			<view class="detail-header__content">
				<view class="detail-header__content-title">
					{{detail_params.classify}}
				</view>
				<view class="detail-header__content-info">
					<text>{{detail_params.create_time}}</text>
				</view>
			</view>
			<button v-if="detail_params.content" :style="detail_params.is_author_like?'background-color: #bbb;':''" @click="follow(detail_params.author.id)" class="detail-header-button" type="default">{{detail_params.is_author_like?"已关注":"+ 关 注"}} </button>
		</view>
		<view class="detail-content">
			<view class="detail-html">
				<!-- #ifdef MP-WEIXIN-->
				<uPase :content="detail_params.content" :noData="noData"></uPase>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN-->
				<mp-html  container-style="padding:15px 0" markdown :content="detail_params.content" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo"
					lazy-load scroll-table selectable use-anchor show-with-animation><view style="text-align: center; color: #CCCCCC;">加载中...</view></mp-html>
				<!-- <mp-html container-style="padding:15px 0" :content="detail_params.content" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo" lazy-load scroll-table selectable use-anchor show-with-animation  @load="load" @ready="ready" @imgtap="imgtap" @linktap="linktap" ><view style="text-align: center; color: #CCCCCC;">加载中...</view></mp-html> -->
				<!-- #endif -->
				<!-- <uPase :content="detail_params.content" :noData="noData"></uPase> -->
				<!-- {{detail_params.content}} -->
				<!-- 内容 -->
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="detail-like">
			
		</view>
		<view class="detail-comment">
			<view class="comment-title">
				<i>——</i> 热门评论 &nbsp; <i> ——</i>
			</view>
			<view class="comment-content">
				<view v-if="commentList.length>0" class="comment-content-cccc">
				<view class="" v-for="(item, i) in commentList" :key="i">
					<comment-box :item="item" @reply="reply"></comment-box>
				</view>
				</view>
					<view v-else class="comment-content-nolist">
						暂无评论，请发表您的看法...
					</view>
			</view>
		</view>
		<view class="detail-bottom">
			<view @click="openText" class="detail-bottom-input">
				<text>我来说两句</text>
				<uni-icons type="compose" size="16" color="#ccc"></uni-icons>
			</view>
			<view class="detail-bottom-icons">
				<view class="detail-bottom-icons-box"  @click="openComments">
					<uni-icons type="chat" size="22" color="#333"></uni-icons>
				</view>
				<view class="detail-bottom-icons-box" @click="clockLikes(detail_params._id)">
					<uni-icons :type="detail_params.is_like?'star-filled':'star'" size="22" :color="!detail_params.is_like?'#333':'#dd524d'"></uni-icons>
				</view>
				<view class="detail-bottom-icons-box"  @click="clockthumbsup(detail_params._id)">
					<uni-icons :type="detail_params.is_thumbs_up?'hand-thumbsup-filled':'hand-thumbsup'" size="22" :color="!detail_params.is_thumbs_up?'#333':'#dd524d'"></uni-icons>
				</view>
				<button class="detail-bottom-icons-box "  data-name="shareBtn" open-type="share">
					<uni-icons type="redo" size="22" color="#333"></uni-icons>
				</button>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-wrap">
				<view class="popup-content">
					<!-- #ifndef MP-WEIXIN -->
					
					<textarea class="uni-input" cursor-spacing="45" auto-focus style="" rows="1" v-model="detailTex" fixed maxlength="50" placeholder="我来说两句" />
				
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
					
					<textarea class="uni-input" cursor-spacing="45"  style="" rows="1" v-model="detailTex" fixed maxlength="50" placeholder="我来说两句" />
				
				<!-- #endif -->
				<view class="popup-bottom">
					<view class="popup-bottom-icons">
						
						<!-- <uni-icons type="chat" size="22" color="#333"></uni-icons>detail_params.is_thumbs_up -->
					</view>
					<view class="popup-bottom-right">
						<view class="popup-count">
							{{ detailTex.length}} / 50
						</view>
						<view  @click="subimt" class="popup-but" :class="detailTex.length<1 ? 'but_disable' : ''">
							发表
						</view>
					</view>
				</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	//  #ifndef MP-WEIXIN
	import mpHtml from '@/components/mp-html/mp-html.vue'
	// #endif
	import uPase from '../../../components/gaoyia-parse/parse.vue'
	export default {
		data() {
			return {
				detailTex:'',
				detail_params:{},
				commentList:[],
				likes:false,
				replyFormData:{},
				noData:"<view style='text-align: center; color: #999;'>正在加载中...</view>"
			};
		},
		computed: {
			...mapState(['user_id'])
		},
		components:{
			uPase,
			
			//  #ifndef MP-WEIXIN
			mpHtml
			// #endif
		},
		onPageScroll(res) {
			if (res.scrollTop >= 100){
				uni.setNavigationBarTitle({
				　　title:this.detail_params.title
				})
			}
			if (res.scrollTop < 100){
				uni.setNavigationBarTitle({
				　　title:' '
				})
				
			}
			// console.log(res,'ssssss');
		},
		async onLoad(res) {
			this.detail_params =  JSON.parse(res.params)
			console.log(this.detail_params.author,'ssssss');
			this.likes = this.detail_params.is_like
			this.get_detail(this.detail_params._id)
			this.get_comments(this.detail_params._id)
			
			uni.$on('updataLike',()=>{
				this.get_detail(this.detail_params._id)
			})
			// console.log(this.detail_params );
		},
		// onReady() {
			
		// },
		methods:{
			openComments(){
				uni.navigateTo({
					url:'../Classify_comments/Classify_comments?id='+this.detail_params._id
				})
			},
			follow(author_id){
				this.update_author(author_id)
			},
			openText(){
				this.$refs.popup.open()
			},
			subimt(){
				if(!(this.detailTex.trim())) return uni.showToast({
					title:"请输入评论内容",
					icon:"none"
				})
				this.get_comment({content: this.detailTex, ...this.replyFormData})
			},
			reply(e){
				this.replyFormData = {
					comment_id: e.item.comment_id,
					isReply: e.isReply
				}
				if(e.item.reply_id){
					this.replyFormData.reply_id = e.item.reply_id
				}
				this.openText();
				// console.log(this.replyFormData,"ee");
			},
			clockthumbsup(article_id){
				// this.likes = !this.likesclockthumbsup
				this.update_thumbsup(article_id)
				console.log(article_id);
			},
			clockLikes(article_id){
				// this.likes = !this.likesclockthumbsup
				this.get_updata_like(article_id)
				console.log(article_id);
			},
			async update_thumbsup(article_id){
				uni.showLoading()
				const res = await this.$api.update_thumbsup({
					user_id:  this.user_id,
					article_id:article_id
				})
				uni.showToast({
					title:this.likes?"点赞成功":"取消点赞",
					icon:"none"
				})
				uni.hideLoading()
				this.detail_params.is_thumbs_up = ! this.detail_params.is_thumbs_up
			},
			async get_updata_like(article_id){
				uni.showLoading()
				const res = await this.$api.get_updata_like({
					user_id:  this.user_id,
					article_id:article_id
				})
				uni.showToast({
					title:this.likes?"收藏成功":"取消收藏",
					icon:"none"
				})
				uni.hideLoading()
				this.detail_params.is_like = ! this.detail_params.is_like
				uni.$emit("up_likes_detail","我是传过去的参数")
				console.log("我是传过去的参数我是传过去的参数我是传过去的参数我是传过去的参数");
			},
			async update_author(author_id) {
				uni.showLoading()
				const formData = {
					author_id:author_id,
					user_id: this.user_id,
				}
				let update_author = await this.$api.update_author(formData)
				uni.hideLoading()
				if (!update_author) return false;
				
				uni.showToast({
					title: !this.detail_params.is_author_like ? "关注成功" : "取消关注",
					icon:"none"
				})
				uni.$emit("updataFollow")
				this.detail_params.is_author_like = !this.detail_params.is_author_like
			},
			async get_detail(article_id) {
				let detailText = await this.$api.get_detail({
					article_id,
					user_id: this.user_id
				})
				if (!detailText) return false;
				this.detail_params = detailText //  JSON.parse(detailText)
				console.log(this.detail_params);
			},
			async get_comment(content) {
				uni.showLoading()
				const formData = {
					article_id:this.detail_params._id,
					user_id: this.user_id,
					...content
				}
				this.$refs.popup.close()
				let commentRes = await this.$api.get_comment(formData)
				if (!commentRes) return false;
				uni.hideLoading()
				
				this.get_comments(this.detail_params._id)
				uni.showToast({
					title:"评论成功",
					icon:"none"
				})
				this.detailTex = ''
				this.replyFormData ={}
				// console.log(commentRes);
			},
			async get_comments(article_id) {
				// uni.showLoading()
				let commentRes = await this.$api.get_comments({
					article_id,
					user_id: this.user_id,
				})
				if (!commentRes) return false;
				// uni.hideLoading()
				// this.$refs.popup.close()
				// uni.showToast({
				// 	title:"评论成功",
				// 	icon:"none"
				// })
				this.commentList = commentRes
				// console.log(commentRes);
			},
			load () {
				console.log('dom 树加载完毕')
			},
			ready (e) {
				console.log('ready 事件触发：', e)
			},
			imgtap (e) {
				console.log('imgtap 事件触发：', e)
			},
			linktap (e) {
				console.log('linktap 事件触发：', e)
			}
		}
	}
</script>

<style scoped lang="scss">
.detail{
	padding: 15px 0;
	padding-bottom: 54px;
	.detail-title{
		padding: 0 15px;
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}
	.detail-header{
		display: flex;
		align-items: center;
		margin-top: 10px;
		padding: 0 15px;
		.detail-header-button{
			flex-shrink: 0;
			height: 30px;
			font-size: 12px;
			color: #FFFFFF;
			border-radius: 15px;
			background-color: $uni-color-primary;
		}
		.detail-header__logo{
			flex-shrink: 0;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.detail-header__content{
			width: 100%;
			padding-left: 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 12px;
			.detail-header__content-title{
				font-size: 14px;
				color: #333;
			}
			.detail-header__content-info{
				color: #999;
				text{
					margin-right: 10px;
				}
			}
		}
	}
	.detail-content{
		margin-top: 20px;
		min-height: 600px;
		.detail-html{
			padding: 0 15px;
		}
	}
	.detail-like{
		width: 100%;
		min-height: 15px;
		background-color: #FFFFFF;
	}
	.detail-comment{
		margin-top: 0px;
		.comment-title{
			text-align: center;
			font-weight: 600;
			color: #dd524d;
			letter-spacing: 10px;
			padding: 10px 0;
			i{
				display: inline-block;
				letter-spacing: 0px;
				padding-right:15px;
				opacity: 0.5;
			}
		}
		.comment-content{
			padding: 0 15px;
			margin-bottom: 20px;
			.comment-content-cccc{
				width: 100%;
			}
			.comment-content-nolist{
				text-align: center;
				color: #ccc;
			}
		}
	}
	.detail-bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 44px;
		border-top: 1px solid #f5f5f5;
		background-color: #fff;
		box-sizing: border-box;
		.detail-bottom-input{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 10px;
			padding: 0 10px;
			width: 100%;
			height: 30px;
			border: 1px solid #ddd;
			border-radius: 15px;
			text{
				font-size: 14px;
				color: #999;
			}
		}
		.detail-bottom-icons{
			display: flex;
			flex-shrink: 0;
			padding: 0 10px;
			.detail-bottom-icons-box{
				background: transparent;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 44px;
			}
		}
	}
	.popup-wrap{
		background-color: #fff;
		padding: 15px 15px 10px;
		box-sizing: border-box;
		.popup-content{
			// position: relative;
			width: 100%;
			box-sizing: border-box;
			textarea{
				
				height: 80px;
				box-sizing: border-box;
				width: 100%;
				padding: 10px;
				border-radius: 10px;
				background-color: #f5f5f5;
				// position: absolute;
				margin-bottom: 10px;
			}
			
		}
		.popup-bottom{
			// position: absolute;
			width: 100%;
			// bottom: 5px;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			.popup-bottom-right{
				display: flex;
				align-items: center;
				.popup-count{
					margin-right: 15px;
					font-size: 12px;
					color: #999;
				}
				.popup-but{
					background-color: $my-bg-color;
					color: #fff;
					vertical-align: middle;
					padding: 0px 15px;
					border-radius: 15px;
				}
				.but_disable{
					opacity: 0.5;
				}
			}
		}
	}
}
</style>
